<template>
    <div>
        <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
            <!-- <div class="form-item-row">
                <a-form-item
                    label="点赞样图"
                    :labelCol="{lg: {span: 7}, sm: {span: 7}}"
                    :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
                    <a-input
                    placeholder="点赞样图" v-model="img_url1" :disabled="true" />
                    <a-upload
                        name="files"
                        :multiple="true"
                        action="/api/v1/admin/uploadFile"
                        @change="handleImg_url1"
                        :show-upload-list="false"
                    >
                        <a-button type="primary">上传</a-button>
                    </a-upload>
                </a-form-item> 
            </div> -->
            <div class="list_box">
                <div class="list_item" v-for="(item,key) in list" :key="key">
                    <a-form-item
                        :label="item.name"
                        :labelCol="{lg: {span: 9}, sm: {span: 9}}"
                        :wrapperCol="{lg: {span: 15}, sm: {span: 15} }">
                        <div style="display:flex">
                            <!-- <a-upload v-if="item.key_name == 'BANNER_1' || item.key_name == 'BANNER_2' || item.key_name == 'BANNER_3'"
                                name="files"
                                :multiple="true"
                                action="/api/v1/admin/uploadFile"
                                @change="handleImgUpload($event,key)"
                                :show-upload-list="false">
                                <a-input
                                :placeholder="item.name" v-model="item.key_value" :disabled="true" />
                            </a-upload> -->
                            <a-input
                            :placeholder="item.name" v-model="item.key_value" />
                            
                            <a-button type="primary" @click="handleSubmit(item)">修改</a-button>
                        </div>
                        
                    </a-form-item> 
                </div>
            </div>
            
            <!-- <div style="padding-left:50px;">
                <a-button type="primary" @click="handleSubmit">确认修改</a-button>
            </div> -->
        </a-card>
    </div>
    
</template>

<script>
import { upconfig, configList } from '@/api/getData'
export default {
    name: 'CourseConf',
    data () {
        return {
            loading: false,
            modalImg: false,
            list: []
        }
    },
    created(){
        configList().then(res=>{
            console.log(res)
            this.list = res
        })
    },
    methods:{
        showModal(){
            this.modalImg = true
        },
        handleImgUpload(info,key) {
            console.log(key)
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                this.$message.success(`${info.file.name} 上传成功`);
                this.list[key].key_value = info.file.response.data.path
                // this.img_url1 = info.file.response.data.path
            } else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name} 上传失败`);
            }
        },
        handleSubmit (item) {
            let that = this
            this.$confirm({
                title: '确认修改?',
                content: '',
                onOk() {
                    upconfig(item.key_name,item.key_value).then(res=>{
                        console.log(res)
                        if(res.code == 200){
                            that.$message.info('修改成功');
                        }else{
                            that.$message.info('修改失败');
                        }
                    })
                },
                onCancel() {}
            });
        }
    }
}
</script>

<style>

.list_box{
    display: flex;
    flex-wrap: wrap;
}
.list_item{
    width: 420px;
    margin-right: 30px;
    margin-bottom: 30px;
}
.ant-form-item-control{
    line-height: 32px;
}
.ant-upload.ant-upload-select{
    width: 198px;
}
</style>

